<template>
<el-container>
  <el-container>
  <el-header>
       <div style="background-color: #00FFFF ">
            <div height="10px">
            </div>
            <el-menu
                  :default-active="activeIndex2"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                  background-color="#808080"
                  text-color="#fff"
                  active-text-color="#77ff77">
                  <el-menu-item index="1"><router-link to="/EstablishProj" >我要立项！</router-link></el-menu-item>
                  <el-submenu index="2">
                    <template #title>查看项目</template>
                    <el-menu-item index="2-1"><router-link to="/MyProj" >我的科研项目</router-link></el-menu-item>
                    <el-menu-item index="2-2"><router-link to="/PermittedProj" >浏览正在进行中项目</router-link></el-menu-item>
                    <el-submenu index="2-3">
                       <template #title>申请加入项目</template>
                       <el-menu-item index="2-3-1"><router-link to="/MyApply" >查看我的申请</router-link></el-menu-item>
                    </el-submenu>
                        <el-menu-item index="2-4"><router-link to="/Leader">发给我的申请</router-link></el-menu-item>
                  </el-submenu>
                </el-menu>
        </div>
  </el-header>
  <el-main style="border: 1px solid #eee;" id="bg">
  <div align="center">
  <br/>
  <br/>
  <el-input
        v-model="searchValue" size="mini" clearable
        placeholder="可根据项目名或立项人进行搜索" style="width:300px"></el-input>
      <el-button type="primary"  @click="doFilter">搜索</el-button>
      <el-button type="primary"  @click="loadData">还原数据</el-button>
      <el-button @click="outExe">导出正在进行项目表格</el-button>
  <el-table
  :data="PermittedProjData"
  v-loading="loading"
  max-height="100%"
  style="width: 100%">
    <el-table-column prop="0" align="center" label="项目名" width="300px" >
    </el-table-column>
    <el-table-column prop="1" align="center" label="单位名称" width="120px">
        </el-table-column>
    <el-table-column prop="2" align="center" label="立项人" width="120px">
    </el-table-column>
    <el-table-column prop="3" :formatter="CdateFormatter" align="center" label="立项时间" width="180px">
        </el-table-column>
    <el-table-column prop="4" :formatter="FdateFormatter" align="center" label="结项时间" width="180px">
        </el-table-column>
     <el-table-column prop="5" :formatter="stateFormatter" align="center" label="当前状态" width="180px">
        <template #reference>
         <div class="name-wrapper">
          <el-tag size="medium">{{ convertState }}</el-tag>
         </div>
        </template>
     </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
       <template #default="scope">
        <el-button
         size="mini"
         @click="handleApply(scope.$index, scope.row)">申请加入</el-button>
       </template>
    </el-table-column>
   </el-table>
   <el-pagination
     background
     layout="prev, pager, next"
     :total="total">
   </el-pagination>
  </div>
  </el-main>
   <div v-show="show">
   <el-main style="text-align: center; border: 1px solid #eee">
    <span>项目名称：</span>
     <el-input v-model="ProName" placeholder="项目名称" style="width:500px"></el-input>
      <br/>
      <br/>
      <br/>
    <span>申请理由：</span>
     <el-input v-model="content" placeholder="申请理由" style="width:500px"></el-input>
      <br/>
      <br/>
      <br/>
     <el-button type="primary" @click=submitApply>提交申请</el-button>
   </el-main>
   </div>
</el-container>
   <br/>
   <br/>
</el-container>
</template>

<script>
import http from '../utils/req.js'
import { export_json_to_excel } from '../Excel/Export2Excel.js'
export default {
  name: 'PermittedProj',
  data() {
    return {
        PermittedProjData:[],
        username:'',
        show:false,
        ProName:'',
        content:'',
        searchValue:'',
        filteredData: [],
        total:0,
        excelData:[]
    }
  },
  mounted: function () {
    this.loadData();
  },
  methods: {
    loadData(){
      var _this = this;
      http.get('/PermittedProj',{
      })
      .then(resp=>{
        if (resp.data.code === 200) {
          _this.PermittedProjData = resp.data.data;
          this.total= resp.data.data.length;
        }
      });
      this.username=sessionStorage.getItem("username");
    },
    stateFormatter(row, column){
     switch(row['5']){
       case 0:
        return '待审核';
        break;

       case 1:
        return '审核通过';
        break;

       case 2:
        return '已结项';
        break;

       case 3:
        return '正在进行';
        break;

       default:
        return '未知';
      }
    },
    CdateFormatter(row, column){
         if(row['3']!==null){
            return row['3'].substring(0,10);
         }
         else{
            return null;
         }
    },
    FdateFormatter(row, column){
         if(row['4']!==null){
            return row['4'].substring(0,10);
         }
         else{
            return null;
         }
    },
    handleApply(index,row){
      this.show=true;
      this.ProName=row['0'];
    },
    submitApply(){
      var _this = this;
      http.post('/PermittedProj',{
        username:sessionStorage.getItem("username"),
        ProName:this.ProName,
        content:this.content
      })
      .then(resp=>{
        if (resp.data.code === 200) {
         alert("Your Apply form have been submitted successfully,now you can track it in 查看我的申请");
       }
      })
      .catch(failResponse=>{
         alert("There's something wrong with your form or our system,we feel sorry about it that you need to try again later");
      })
    },
    doFilter() {
      this.filteredData = [];
      this.PermittedProjData.filter((item)=>{
        if('0' in item || '2' in item){
          if (item['0'].indexOf(this.searchValue) > -1
            || item['2'].indexOf(this.searchValue) > -1) {
            this.filteredData.push(item);
            this.total=this.filteredData.length;
          }
        }
      })
      this.PermittedProjData=this.filteredData;
    },
    outExe() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          debugger;
          this.excelData = this.PermittedProjData; //你要导出的数据list。
          this.export2Excel();
        })
        .catch(() => {});
    },
    export2Excel() {
          let ExportDate=new Date();
            const tHeader = [
              "项目名",
              "单位名称",
              "立项人",
              "立项时间",
              "结项时间",
              "当前状态"
            ]; // 导出的表头名
            const filterVal = [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
            ]; // 导出的表头字段名
            const list = this.excelData;
            // that.excelData为传入的数据
            const data = this.formatJson(filterVal, list);
            export_json_to_excel({
            header:tHeader,
             data:data,
            filename:ExportDate+'我的项目导出excel'
            }); // 导出的表格名称，根据需要自己命名
            // tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]));
        }
  }
}
</script>